<!-- 计数记录 -->

<template>
  <div>
    <div class="ScheduleTemplate-ModalContent-type">
      <FormSelect :one="children[0]" bind="type" :dict="DICT.TYPE" noLabel disabled />
    </div>

    <draggable v-model="one.record" class="ScheduleTemplate-ModalContent-content" :animation="200" :disabled="isShow">
      <div v-for="item in children" :key="item.key">
        <FormSlot :bind="`${type}_${item.key}`" tip="请输入内容" noLabel eighth3 required>
          <FormInput :one="item" bind="content" :max="100" @change="toChange(item)" />
        </FormSlot>

        <FormSlot label="选择设备" :bind="`device_${item.key}`" tip="请选择设备" word5 eighth3>
          <BtnText @click="toOpen(item)">
            <span v-if="item.deviceId">{{ item.deviceName }}</span>
            <span v-else>选择 <i class="el-icon-d-arrow-right" /></span>
          </BtnText>
          <BtnText v-if="item.deviceId && !isShow" red @click="toClear(item)">清除</BtnText>
        </FormSlot>

        <FormSlot v-if="item.deviceId" :bind="`point_${item.key}`" tip="请选择属性点" noLabel quar>
          <FormSelect
            v-if="point_info[item.deviceId]"
            :one="item"
            label="属性点"
            bind="deviceMonitorId, deviceMonitorName"
            :dict="point_info[item.deviceId]"
            noLabel
            @change="changePoint(item)"
          />
        </FormSlot>
      </div>
    </draggable>

    <div v-if="!isShow" class="ScheduleTemplate-ModalContent-btn">
      <FormSlot v-for="(item, i) in children" :key="item.key" noLabel>
        <div class="alignCenter">
          <BtnText v-if="!isShow" icon="el-icon-plus" class="marginRight" @click="addChild(i)" />
          <BtnText v-if="!isShow" :disabled="children.length === 1" icon="el-icon-minus" red @click="delChild(i)" />
        </div>
      </FormSlot>
    </div>

    <EasyModal v-model="easyVisible" title="选择设备" medium @submit="toSubmit">
      <ChooseIOTOne :obj="obj" bind="device" />
    </EasyModal>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import ContentState from '../ContentState'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'ContentRecord',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixInfo('point', 'point_'), CORE.mixSelect('point', 'point_')],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      easyVisible: false, // 弹窗是否可见
      obj: { device: {} }, // 数据对象
      row: {}, // 当前正在选择的数据行
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: ContentState.computed,

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...ContentState.methods,

    /**
     * 弹窗
     */
    toOpen(item) {
      const { deviceId: id, deviceName } = item
      this.obj.device = { id, deviceName } // 设置选中
      this.easyVisible = true
      this.row = item
    },

    /**
     * 提交
     */
    toSubmit() {
      const { obj, row, one, MAP, $set } = this

      if (CORE.isEmpty(obj.device)) {
        CORE.MSG.warning('请选择设备')
        return
      }

      const { id: deviceId, deviceName } = obj.device
      Object.assign(row, { deviceId, deviceName, deviceMonitorId: '', deviceMonitorName: '' })
      $set(one, `device_${row.key}`, MAP.checkDevice(row))
      $set(one, `point_${row.key}`, '')

      this.point_selectParam.deviceId = [deviceId]
      this.point_startSelect()

      this.easyVisible = false
    },

    /**
     * 清除
     */
    toClear(item) {
      const { one, $set } = this
      Object.assign(item, { deviceId: '', deviceName: '', deviceMonitorId: '', deviceMonitorName: '' })
      $set(one, `device_${item.key}`, '')
      $set(one, `point_${item.key}`, '')

      this.point_selectParam.deviceId = []
      this.point_startSelect()
    },

    /**
     * 切换属性点
     */
    changePoint(item) {
      const { one, MAP, $set } = this
      $set(one, `point_${item.key}`, MAP.checkPoint(item))
    },
  },
}
</script>
